<template>
  <div class="shopping-cart">
    <div class="header">
      <div class="container w">
        <div class="left">
          <div class="icon">
            <img
              src="../../assets/images/shopping-cart/shoppingcart-icon.png"
              alt=""
            />
          </div>
          <h1>我的购物车</h1>
          <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
        </div>
        <div class="right">
          <ul>
            <li><a href="javascript:;">name</a></li>
            <li><a href="javascript:;">我的订单</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="mian">
      <div class="container w">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column width="120">
            <template #default="scope">
              <img
                :src="
                  /^\d/.test(scope.row.img)
                    ? require('/src/assets/images/main/body/phone/phoneType/' +
                        scope.row.img)
                    : scope.row.img
                "
                alt=""
                style="width: 80px"
              />
            </template>
          </el-table-column>
          <el-table-column label="名称">
            <template #default="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column property="describe" label="描述" />
          <el-table-column property="other[memory]" label="内存" />
          <el-table-column property="other[color]" label="颜色" width="120"></el-table-column>
          <el-table-column property="price" label="价格" width="120" />
          <el-table-column label="数量" align="center">
            <template #default="scope">
              <el-input-number v-model="scope.row.num" :min="1" :max="999" />
            </template>
          </el-table-column>
          <el-table-column>
            <template #default="scope">
              <el-button
                size="default"
                type="danger"
                @click="handleDelete(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="footer">
      <div class="container w">
        <div class="left">
          <ul>
            <li><a href="javascript:;" @click="tohome">继续购物</a></li>
            <li><a href="javascript:;">已选择 <span>{{selectNum}}</span> 件</a></li>
          </ul>
        </div>
        <div class="right">
          <ul>
            <li><p>合计：<span>{{total}}</span>元</p></li>
            <li><a href="javascript:;" ref="gobuy">去结算</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { reactive, toRefs, ref} from "vue";
export default {
  name: "ShoppingCart",
  setup() {
    const store = useStore();
    const router = useRouter()

    //实例对象
    const gobuy = ref(null)
    
    const data = reactive({
      //已选择商品的个数
      selectNum:0,
      //金额总数
      total:0
    })

    //获取购物车中的数据
    const tableData = store.state.shoppingcart.phoneList;

    //删除数据
    function handleDelete(val) {
      store.commit("shoppingcart/delPhoneList",val)
    }

    //多选框回调函数
    function handleSelectionChange (selection) {
      //选择的个数 
      data.selectNum = selection.length
      //金额的总和
      data.total = selection.length ? selection.map(item => parseFloat(item.price) * item.num).reduce(function(previousValue,currentValue) {
        return previousValue + currentValue
      }) :0  
      // 存在选中商品的状态结算样式
      selection.length ? (gobuy.value.style.background = '#ff6077' ,gobuy.value.style.color = '#fff') : (gobuy.value.style.background = '' ,gobuy.value.style.color = '')
    }

    function tohome() {
      router.push('/home')
    }

    return {
      tableData,
      handleDelete,
      handleSelectionChange,
      ...toRefs(data),
      tohome,
      gobuy,
    };
  },
};
</script>

<style lang="less" scoped>
.shopping-cart {
  height: 100vh;
  background-color: #f5f5f5;
  .header {
    height: 102px;
    background-color: #fff;
    border-bottom: 2px solid cornflowerblue;
    .container {
      display: flex;
      justify-content: space-between;
      padding: 26px 0;
      .left {
        display: flex;
        .icon {
          img {
            width: 48px;
            height: 48px;
          }
        }
        h1 {
          margin-left: 36px;
          font-size: 28px;
          color: #424242;
          line-height: 52px;
        }
        p {
          margin-left: 16px;
          font-size: 12px;
          color: #757575;
          line-height: 66px;
        }
      }
      .right {
        ul {
          display: flex;
          height: 100%;
          li {
            line-height: 56px;
            a {
              display: block;
              padding: 0 12px;
              font-size: 12px;
              color: #757575;
            }
            &:nth-child(1) {
              a {
                &::after {
                  content: ">";
                  display: inline-block;
                  margin-left: 10px;
                  font-weight: bolder;
                  color: #bbb;
                  transform: translateY(2px) rotate(90deg);
                }
              }
            }

            &:nth-child(2) {
              a {
                &::before {
                  content: "|";
                  margin-right: 20px;
                  font-weight: bold;
                  color: #bbb;
                }
              }
            }
          }
        }
      }
    }
  }
  .footer {
    margin-top: 20px;
    .container {
      display: flex;
      justify-content: space-between;
      height: 50px;
      background-color: #fff;
      .left {
        ul {
          display: flex;
          li {
            
            height: 50px;
            line-height: 50px;
            padding: 0 16px;
            &:nth-child(1) {
              position: relative;
              &::after {
              position: absolute;
              top: 17px;
              right: 0;
              content: '';
              width: 1px;
              height: 16px;
              background-color: #bbb;
            }
            }
            a {
              display: block;
              font-size: 14px;
              color: #757575;
              span {
                color: red;
              }
            }
          }
        }
      }
      .right {
        ul {
          display: flex;
          li {
            height: 50px;
            line-height: 50px;
            &:nth-child(1) {
              padding: 0 16px;
              font-size: 14px;
              color: #ff6077;
              span {
                font-size: 22px;
              }
            }
            &:nth-child(2) {
              width: 202px;
              text-align: center;
              background-color: #b0b0b0;
              a {
                display: block;
                color: #757575;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
}
</style>